import { View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useState, useEffect, ReactNode, ComponentType, useRef } from "react";
import LgSearch from "../../../components/search";
import styles from "./index.modules.scss";
import useDebounceValue from "./useDebounceValue";
import { ViewProps } from "@tarojs/components/types/View";
import useClickOutside from "./useClickOutside";

export interface NavTabBarProps {
  /** 左侧数量描述 */
  infoTagDom: ReactNode | null;
  /** 搜索关键词 */
  keyword?: string;
  placeholder?: string;
  /** 设置关键词 */
  setKeyword?(keyword: string): void;
  /** 是否展示删选菜单 */
  isOpen?: boolean;
  setIsOpen?(isOpen: boolean): void;
  /** 点击搜索图标回调，若没有则默认点击显示搜索  */
  onClick?(): void;
  onInput?(keyword: string): void;
  onConfirm?(keyword: string): void;
  /** 是否显示筛选状态 */
  hadFilter?: boolean;
}

export type NavTabBarType = NavTabBarProps & ComponentType<ViewProps>;

function App(props: NavTabBarProps) {
  const {
    infoTagDom,
    hadFilter = false,
    keyword = "",
    placeholder = "搜索",
    isOpen = false,
    setIsOpen,
    onInput,
    onConfirm,
    setKeyword,
    onClick,
    ...restProps
  } = props;

  const [word, setWord] = useState(keyword);
  const [showSearch, setShowSearch] = useState(false);
  const debounceKeyword = useDebounceValue(word, 500);

  const handleSearchIconTrigger = () => {
    if (onClick && typeof onClick === "function") {
      onClick();
      return;
    }
    setShowSearch(true);
  };

  const handleClose = () => {
    setWord("")
    setTimeout(() => {
      setShowSearch(false)
    }, 300);
  }


  useEffect(() => {
    if (setKeyword && typeof setKeyword === "function") {
      setKeyword(debounceKeyword);
    }

    if (typeof onConfirm === "function") {
      onConfirm(debounceKeyword);
    }

    if (typeof onInput === "function") {
      onInput(debounceKeyword);
    }
  }, [debounceKeyword]);

  return (
    <View className={styles.wrapper} {...restProps}>
      {infoTagDom && <View className={styles.title}>{infoTagDom}</View>}
      <View className={styles.search}>
        {showSearch ? (
            // <LgSearch
            //   type="A"
            //   value={word}
            //   placeholder={placeholder}
            //   onClose={handleClose}
            //   onInput={(value: string) => setWord(value)}
            // />
            <View
            className={styles["search-icon"]}
            onClick={handleSearchIconTrigger}
          ></View>
            
        ) : (
          <View
            className={styles["search-icon"]}
            onClick={handleSearchIconTrigger}
          ></View>
        )}
      </View>
      <View
        className={styles.filter}
        onClick={() => setIsOpen && setIsOpen(true)}
      ></View>
    </View>
  );
}
export default App;
